<template>
  <div class="main">
    <div id="container"></div>
  </div>
</template>
<script>
export default {
  name: "map",
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import http from "@/utils/request";
import { provinceAndCityData } from "element-china-area-data";
import { isNull } from "lodash";
import { ElMessage } from "element-plus";
import load from "@/utils/load.js"; // 引入

const options = ref(provinceAndCityData);
const query = ref("");
const region = ref("福州市");
const selectData = ref(["福建省", "福州市"]);
let map = isNull;
const props = {
  label: "label",
  value: "label",
};
const handleChange = () => {
  console.log(region.value);
  if (selectData.value.length == 2) {
    region.value = selectData.value[1];
  }
};
const search = () => {
  showInfo(map, true);
};
const showInfo = async (map, isFirstLoad) => {
  if (!region.value) {
    ElMessage.warning("城市不能为空");
    return;
  } else if (!query.value) {
    isFirstLoad && ElMessage.warning("关键字不能为空");
    return;
  }
  let result = await http.get(
    `/app/map/search?query=${query.value}&region=${region.value}`
  );
  let res = result.data;
  if (res.code == 200) {
    console.log(res.data);
    res.data.map((t) => {
      var point = new BMapGL.Point(t.location.lng, t.location.lat);
      var marker = new BMapGL.Marker(point); // 创建标注
      map.addOverlay(marker);
      map.centerAndZoom(point, 12);
    });
  }
};
onMounted(() => {
  load.show();
  map = new BMapGL.Map("container"); // 创建地图实例
  var point = new BMapGL.Point(119.324785, 26.070322); // 创建点坐标
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true);
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
  map.addControl(cityCtrl);
  var navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件
  map.addControl(navi3DCtrl);
  // 创建定位控件
  var locationControl = new BMapGL.LocationControl({
    // 控件的停靠位置（可选，默认左上角）
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    // 控件基于停靠位置的偏移量（可选）
    offset: new BMapGL.Size(10, 20),
  });
  // 将控件添加到地图上
  map.addControl(locationControl);

  // showInfo(map);
  setTimeout(() => {
    load.hide();
  }, 1000);
});
</script>

<style lang="less" scoped>
.main {
  height: calc(100% - 56px);
  position: relative;

  #container {
    height: 100%;
  }
  #search {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 30%;
    height: auto;
    padding: 10px;
    display: flex;
  }
}
</style>